<template>
  <div>
    <header>个人中心</header>
    <main class="main">
      <section class="main-header">
        <div class="userinfo">
          <img :src="$api.imgUrl + userImg()" alt="" />
          <div class="notLogin" v-if="notLogin">
            <p>点击登录 <i class="iconfont icongengduo"></i></p>
          </div>
          <div v-else class="hasLogin">
            <div class="userMsg">
              <p>
                {{ userInfo.username }}
                <span @click="toAuthentication">{{ is_authentication() }}</span>
              </p>
              <p>绑定手机：{{ userInfo.mobile }}</p>
              <p>上次登录时间：{{ userInfo.login_time }}</p>
            </div>
            <i
              class="iconfont icongengduo"
              @click="$commonJs.goPage('personInfo')"
            ></i>
          </div>
        </div>
      </section>
      <section class="order">
        <div class="order-header" @click="$commonJs.goPage('order')">
          <p>我的订单</p>
          <p>查看全部 <i class="iconfont icongengduo"></i></p>
        </div>
        <div class="order-content">
          <div @click="$commonJs.goPage('order', false, 1)">
            <p>
              <i class="iconfont icondaifukuan" style="font-size: 22px;"></i>
              <span class="buoy" v-show="buoy.payment">{{
                buoyNum.payment
              }}</span>
            </p>
            <p>待付款</p>
          </div>
          <div @click="$commonJs.goPage('order', false, 2)">
            <p>
              <i class="iconfont icondaifahuo" style="font-size: 22px;"></i>
              <span class="buoy" v-show="buoy.deliverGoods">{{
                buoyNum.deliverGoods
              }}</span>
            </p>
            <p>待发货</p>
          </div>
          <div @click="$commonJs.goPage('order', false, 3)">
            <p>
              <i class="iconfont icondaishouhuo" style="font-size: 26px;"></i>
              <span class="buoy" v-show="buoy.receiving">{{
                buoyNum.receiving
              }}</span>
            </p>
            <p>待收货</p>
          </div>
          <div @click="$commonJs.goPage('order', false, 4)">
            <p>
              <i class="iconfont icondaipingjia" style="font-size: 22px;"></i>
              <span class="buoy" v-show="buoy.evaluate">{{
                buoyNum.evaluate
              }}</span>
            </p>
            <p>待评价</p>
          </div>
        </div>
      </section>
      <section class="balance" @click="toBalance">
        <div>
          <i
            class="iconfont iconyue"
            style="font-size: 22px;color: #317EB9;"
          ></i>
          <p>余额</p>
        </div>
        <div>
          <p>￥{{ userInfo.money }}</p>
          <i class="iconfont icongengduo"></i>
        </div>
      </section>
      <section class="other">
        <div>
          <div class="other-content" @click="$commonJs.goPage('personInvite')">
            <i
              class="iconfont iconyaoqinghaoyou"
              style="font-size: 30px;color: #317EB9;"
            ></i>
            <p class="other-name">邀请好友</p>
          </div>
          <div
            class="other-content"
            style="margin-top: 30px;"
            @click="$commonJs.goPage('personAddress')"
          >
            <i
              class="iconfont iconshouhuodizhi"
              style="font-size: 30px;color: #FFC333;"
            ></i>
            <p class="other-name">收货地址</p>
          </div>
        </div>
        <div>
          <div class="other-content" @click="$commonJs.goPage('personReward')">
            <i
              class="iconfont iconwodejiangli"
              style="font-size: 30px;color: #ED721B;"
            ></i>
            <p class="other-name">我的奖励</p>
          </div>
          <div
            class="other-content"
            style="margin-top: 30px;"
            @click="$commonJs.goPage('personMessage')"
          >
            <i
              class="iconfont iconxiaoxitongzhi"
              style="font-size: 30px;color: #EF608B;"
            ></i>
            <p class="other-name">消息通知</p>
          </div>
        </div>
        <div>
          <div class="other-content" @click="$commonJs.goPage('personSetting')">
            <i
              class="iconfont iconanquanzhongxinon"
              style="font-size: 30px;color: #10AC43;"
            ></i>
            <p class="other-name">安全中心</p>
          </div>
          <div class="other-content" style="margin-top: 30px;">
            <i class="iconfont" style="font-size: 30px;color: #FFC333;"></i>
            <p class="other-name"></p>
          </div>
        </div>
        <div>
          <div class="other-content" @click="$commonJs.goPage('personCard')">
            <i
              class="iconfont iconyinhangka"
              style="font-size: 30px;color: #D4022A;"
            ></i>
            <p class="other-name">我的银行卡</p>
          </div>
          <div class="other-content" style="margin-top: 30px;">
            <p class="other-name"></p>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "index",
  data() {
    return {
      notLogin: true, //未登录
      buoy: {
        //订单浮标
        payment: false, //待付款
        deliverGoods: false, //待发货
        receiving: false, //待收货
        evaluate: false //待评价
      },
      buoyNum: {
        //订单浮标数量
        payment: 0, //待付款
        deliverGoods: 0, //待发货
        receiving: 0, //待收货
        evaluate: 0 //待评价
      }
    };
  },
  methods: {
    toBalance() {
      this.$router.push({ name: "personBalance" });
    },
    promptBuoy(data) {
      for (let item in data) {
        if (data[item] !== 0) {
          switch (item) {
            case "wait_pay":
              this.buoy.payment = true;
              this.buoyNum.payment = data[item];
              break;
            case "wait_ship":
              this.buoy.deliverGoods = true;
              this.buoyNum.deliverGoods = data[item];
              break;
            case "wait_receipt":
              this.buoy.receiving = true;
              this.buoyNum.receiving = data[item];
              break;
            case "wait_eval":
              this.buoy.evaluate = true;
              this.buoyNum.evaluate = data[item];
              break;
          }
        }
      }
    },
    toAuthentication() {
      if (this.userinfo.is_check === 0) {
        this.$router.push({ name: "personAuthentication" });
      }
    },
    is_authentication() {
      if (this.isValidate) {
        return "已认证";
      } else {
        return "去认证";
      }
    },
    userImg() {
      if (this.userInfo.img_head.length > 0) {
        return this.userInfo.img_head;
      } else {
        return require("@/assets/img/headPortrait.png");
      }
    },
    personalInfo() {
      this.$ajax
        .post(this.$api.personalCenter)
        .then(res => {
          this.$store.dispatch("changeValidate", res.data.is_check);
          this.$store.dispatch("changeSetPay", res.data.is_pay_password);
          this.$store.dispatch("changeCard", res.data.is_card);
          this.$store.dispatch("changeUserImg", res.data.img_head);
          this.$store.dispatch("changeUsername", res.data.username);
          this.$store.dispatch("changeUserOrder", res.data.order);
          this.$store.dispatch("changeLoginTime", res.data.login_time);
          this.$store.dispatch("changeUserMobile", res.data.mobile);
          this.$store.dispatch("changeUserMoney", res.data.money);
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  computed: {
    ...mapState(["userInfo", "isValidate", "isLogin"])
  },
  mounted() {
    if (this.isLogin) {
      this.notLogin = false;
      this.personalInfo();
      this.promptBuoy(this.userInfo.order);
    }
  }
};
</script>

<style scoped lang="stylus">
header{
  font-size 36px;
  color #333333;
  text-align center;
  width 100%;
  background-color #ffffff;
  padding 27px 0;
}
.main{
  background-image: url("../../assets/img/login/loginBg.png");
  background-size: 100%;
  background-repeat:no-repeat;
  padding-bottom 124px;
}
  .main-header{
    padding 103px 24px 0;
  }
  .userinfo{
    width 100%;
    background-color #ffffff;
    border-radius 8px;
    padding 25px 0 24px 19px;
    box-sizing border-box;
    display flex;
    align-items center;
  }
  .userinfo>img{
    width: 135px;
    height 135px;
    border-radius 50%;
  }
.notLogin>p{
  font-size: 30px;
  color #666666;
  line-height 30px;
  margin-left 23px;
}
  .hasLogin{
    display flex;
    align-items center;
    justify-content space-between;
    margin-left 24px;
    width 100%;
    padding-right 20px;
    box-sizing border-box;
  }
  .userMsg>p:nth-of-type(1){
    font-size 26px;
    color #333333;
    line-height 30px;
  }
.userMsg>p:nth-of-type(1)>span{
  border-radius 11px;
  border 1px solid #317EB9;
  color #317EB9;
  font-size 18px;
  padding 1px 10px;
  margin-left 12px;
  line-height 30px;
}
.userMsg>p:nth-of-type(2){
  font-size 20px;
  color: #333333;
  line-height 30px;
  margin 26px 0 28px 0;
}
.userMsg>p:nth-of-type(3){
  font-size 20px;
  color: #333333;
  line-height 30px;
}
  .order{
    width 100%;
    background-color #ffffff;
    padding 0 24px;
    margin-top 18px;
    box-sizing border-box;
  }
  .order-header{
    display flex;
    justify-content space-between;
    border-bottom 1px solid #E6E6E6;
    padding 14px 0;
  }
.order-header>p:first-child{
  font-size 28px;
  font-weight 500;
  line-height 30px;
}
.order-header>p:last-child{
  font-size 22px;
  color #666666;
  line-height 30px;
}
.order-header>p:last-child>i{
  margin-left 15px;
}
  .order-content{
    display flex;
    justify-content space-around;
    padding 18px 0;
  }
  .order-content>div>p:first-child{
    width: 70px;
    height: 70px;
    border-radius 50%;
    text-align center;
    line-height: 70px;
  }
.order-content>div>p:last-child{
  font-size 22px;
  color #666666;
  line-height 30px;
  margin-top 16px;
}
.order-content>div{
  text-align center;
  position relative;
}
.order-content>div>p:first-child>i{
  color #ffffff;
}
.order-content>div:nth-of-type(1)>p:first-child{
  background-color #317EB9;
}
.order-content>div:nth-of-type(2)>p:first-child{
   background-color #EF608B;
 }
.order-content>div:nth-of-type(3)>p:first-child{
  background-color #ED721B;
}
.order-content>div:nth-of-type(4)>p:first-child{
  background-color #FFC333;
}
.buoy{
  position absolute
  background-color #fa152a
  border-radius 50%;
  color #ffffff;
  font-size 8px;
  width: 26px
  height: 26px
  text-align center;
  line-height 28px;
}
.balance{
  padding 20px 24px 19px 78px;
  background-color #ffffff;
  box-sizing border-box;
  margin 18px 0;
  display flex;
  justify-content space-between;
}
.balance>div{
  display flex;
  align-items center;
}
  .balance>div:first-child>p{
    font-size 26px;
    color #333333;
    line-height 30px;
    margin-left 20px;
  }
.balance>div:last-child>p {
  font-size 20px;
  color #999999;
  line-height 30px;
  margin-right 15px;
}
  .other{
    padding 62px 0 49px 0;
    display flex;
    justify-content space-around;
    background-color #ffffff;
  }
  .other-name{
    font-size 24px;
    color #666666;
    line-height 30px;
    margin-top 30px;
  }
  .other-content{
    text-align center;
  }
</style>
